<template>
	<view class="search-dialog">
		<popup ref="aiSearch" class="ai-search" type="bottom" @change="onChange">
			<view class="ai-list" @touchmove.stop.prevent>
				<text class="iconfont icon-guanbi" @tap="close"></text>
				<image mode="widthFix" class="background" src="@/static/images/index/ai-search.png" />
				<view class="tab-bar">
					<view class="tab-item" :class="[{ active: active === 'taobao' }]" @tap="tabChange('taobao')">淘宝</view>
					<view class="tab-item" :class="[{ active: active === 'jingdong' }]" @tap="tabChange('jingdong')">京东</view>
					<view class="tab-item" :class="[{ active: active === 'pinduoduo' }]" @tap="tabChange('pinduoduo')">拼多多</view>
				</view>
				<scroll-view :scroll-top="0" :scroll-y="true" :lower-threshold="300" :scroll-with-animation="true" class="scroll-list"
				 @scrolltolower="aiLoader" @touchmove.stop.prevent>
					<view class="ai-wrap" v-for="(goodsItem, goodsIndex) in goodsList" :key="goodsItem.gid">
						<goods-item :item="goodsItem" :permInfo="permInfo" v-if="active === 'taobao'"></goods-item>
						<jd-goods-item :item="goodsItem" :permInfo="permInfo" v-else-if="active === 'jingdong'" :isLoading="false"></jd-goods-item>
						<pdd-goods-item :item="goodsItem" :permInfo="permInfo" v-else-if="active === 'pinduoduo'" :isLoading="false"></pdd-goods-item>
					</view>

					<!-- 加载中插件 -->
					<load-more :loading="true" v-if="loading"></load-more>

					<template v-if="finished || empty">
						<view class="super-title">
							<view class="line"></view>
							<text class="text">全网商品</text>
							<view class="line"></view>
						</view>
						<view class="ai-wrap" v-for="(goodsItem, goodsIndex) in superGoodsList" :key="goodsItem.gid">
							<goods-item :item="goodsItem" :permInfo="permInfo" type="superGoods" v-if="active === 'taobao'"></goods-item>
							<jd-goods-item :item="goodsItem" :permInfo="permInfo" type="superGoods" v-else-if="active === 'jingdong'"
							 :isLoading="false"></jd-goods-item>
							<pdd-goods-item :item="goodsItem" :permInfo="permInfo" type="superGoods" v-else-if="active === 'pinduoduo'"
							 :isLoading="false"></pdd-goods-item>
						</view>
						<!-- 加载中插件 -->
						<load-more :loading="superLoading" :finished="superFinished" :empty="superEmpty"></load-more>
					</template>
				</scroll-view>
			</view>
		</popup>
		<popup ref="exactSearch" class="exact-search" @change="onChange">
			<view class="main">
				<view class="top">
					<view class="head" @tap="toDetail(exactItem)">
						<view class="left">已为您找到商品</view>
						<view class="right">
							<text class="iconfont icon-wodedingdan"></text>
							商品详情
							<text class="iconfont icon-xiayiye"></text>
						</view>
					</view>
					<jd-goods-item :item="exactItem" type="superGoods" v-if="searchType === 'jingdong'" :isLoading="false"></jd-goods-item>
					<pdd-goods-item :item="exactItem" type="superGoods" v-if="searchType === 'pinduoduo'" :isLoading="false"></pdd-goods-item>
					<goods-item :item="exactItem" v-if="searchType === 'taobao' && isExactType === 'goods'"></goods-item>
					<goods-item :item="exactItem" v-if="searchType === 'taobao' && isExactType === 'superGoods'" type="superGoods"></goods-item>
					<view class="save" @tap="toDetail(exactItem)" v-if="searchType === 'jingdong'">下单立省{{ (parseFloat(exactItem.couponDiscount) + parseFloat(exactItem.couponCommissionApp)) | Fixed(2) }}元</view>
					<view class="save" @tap="toDetail(exactItem)" v-else-if="searchType === 'pinduoduo'">下单立省{{ (parseFloat(exactItem.couponDiscount / 100) + parseFloat(exactItem.couponCommissionApp)) | Fixed(2) }}元</view>
					<template v-else>
						<view class="save" @tap="toDetail(exactItem, 'buy')" v-if="exactItem.tljMoney && Number(exactItem.tljMoney) > 0">
							<text>
								下单立省{{ (parseFloat(exactItem.mdMoney) + parseFloat(exactItem.couponMoney) + parseFloat(exactItem.tljMoney)) | Fixed(2) }}元
							</text>
						</view>
						<view class="save" @tap="toDetail(exactItem)" v-else>
							<text>下单立省{{ (parseFloat(exactItem.allowanceMoney) + parseFloat(exactItem.couponMoney)) | Fixed(2) }}元</text>
						</view>
					</template>
					
				</view>
				<text class="iconfont icon-guanbi" @tap="$refs.exactSearch.close()"></text>
			</view>
		</popup>
		<popup ref="emptySearch" class="empty-popup" @change="onChange">
			<view class="main">
				<image mode="widthFix" class="background" src="@/static/images/index/ai-empty.png" />
				<view class="h2">查找不到商品</view>
				<view class="text">抱歉，没有找到相似的商品</view>
				<view class="btn" @tap="$refs.emptySearch.close()">知道了</view>
			</view>
		</popup>
	</view>
</template>

<script>
	const Alibcsdk = uni.requireNativePlugin('UZK-Alibcsdk');
	const JDopen = uni.requireNativePlugin('UZK-JDopen');
	import Popup from '@/components/uni/Popup';
	import GoodsItem from '@/components/GoodsItem';
	import JdGoodsItem from '@/components/jd/GoodsItem';
	import PddGoodsItem from '@/components/pdd/GoodsItem';
	import LoadMore from '@/components/LoadMore';
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: 'AiSearch',
		components: {
			Popup,
			GoodsItem,
			JdGoodsItem,
			PddGoodsItem,
			LoadMore
		},
		data() {
			return {
				active: 'taobao',
				goodsList: [],
				loading: false,
				finished: false,
				empty: false,
				params: {
					page: 1,
					size: 20,
					keyWord: ''
				},
				superGoodsList: [],
				superLoading: false,
				superFinished: false,
				superEmpty: false,
				superParams: {
					page: 1,
					size: 20,
					keyWord: ''
				},
				exactItem: {},
				isExactType: 'goods',
				searchType: null,
				openExact: false,
				isShowResult: false
			}
		},
		computed: {
			...mapGetters(['permInfo'])
		},
		methods: {
			open(keyWord) {
				// 校验商品类型
				let jdReg = RegExp(/jd.com/);
				let pddReg = RegExp(/yangkeduo.com/);
				if (keyWord.match(jdReg)) {
					this.searchType = 'jingdong';
				} else if (keyWord.match(pddReg)) {
					this.searchType = 'pinduoduo';
				} else {
					this.searchType = 'taobao';
				}
				this.active = 'taobao';
				this.params.keyWord = keyWord;
				this.params.page = 1;

				this.superParams.keyWord = keyWord;
				this.superParams.page = 1;

				this.goodsList = [];
				this.loading = false;
				this.finished = false;
				this.empty = false;
				this.superGoodsList = [];
				this.superLoading = false;
				this.superFinished = false;
				this.superEmpty = false;
				this.openExact = false;

				// 纯数字正则校验
				let isNum = new RegExp(/^\d{1,}$/);
				if (keyWord !== 'yingxiaozui' && keyWord !== 'haifan168@qq.com' && keyWord !== '1490016454' && !isNum.test(keyWord)) {
					this.aiLoader();

					// 立即清空剪贴板
					uni.setClipboardData({
						data: '',
						success: function() {},
						complete: function() {
							uni.hideToast();
						}
					});
				}
			},
			refresh() {
				this.params.page = 1;
				this.superParams.page = 1;
				this.goodsList = [];
				this.loading = false;
				this.finished = false;
				this.empty = false;
				this.superGoodsList = [];
				this.superLoading = false;
				this.superFinished = false;
				this.superEmpty = false;

				this.aiLoader();
			},
			close() {
				this.$store.commit({
					type: 'setAiSearch',
					aiSearch: false
				});

				this.$refs.aiSearch.close();
				this.$refs.exactSearch.close();
				uni.showTabBar({})
			},
			aiLoader() {
				// 全网、大淘客搜索区分
				if (!this.empty && !this.finished) {
					this.scrollLoader();
				} else if (!this.superEmpty && !this.superFinished) {
					this.superScrollLoader();
				}
			},
			// 普通搜
			scrollLoader() {
				if (!this.loading && !this.empty && !this.finished) {
					this.loading = true;
					// 京东、拼多多只开启超级搜且是精准搜
					if (this.searchType === 'jingdong' || this.searchType === 'pinduoduo') {
						let service = null;
						if (this.searchType === 'jingdong') {
							service = this.$service.jingdong.goods.superGoods(this.params);
						} else if (this.searchType === 'pinduoduo') {
							service = this.$service.pdd.goods.superGoods(this.params)
						} else {
							return false;
						}
						service.then(res => {
							// 上架过程增加vip会员商品过滤
							let isShelf = false;
							if (this.permInfo.common && this.permInfo.common.length > 0) {
								this.permInfo.common.forEach(item => {
									if (item.name === 'isShelf' && item.status === 1) {
										isShelf = true;
									}
								});
							}
							if (!isShelf) {
								let reg1 = RegExp(/腾讯视频/);
								let reg2 = RegExp(/会员/);
								let reg3 = RegExp(/年卡/);
								let reg4 = RegExp(/爱奇艺/);
								let reg5 = RegExp(/视频/);
								let reg6 = RegExp(/vip/);
								let reg7 = RegExp(/VIP/);
								let reg8 = RegExp(/芒果/);
								let reg9 = RegExp(/优酷/);
								let reg10 = RegExp(/搜狐/);
								res.list = res.list.filter(item => {
									if (this.searchType === 'jingdong') {
										if (item.skuName.match(reg1) ||
											item.skuName.match(reg2) ||
											item.skuName.match(reg3) ||
											item.skuName.match(reg4) ||
											item.skuName.match(reg5) ||
											item.skuName.match(reg6) ||
											item.skuName.match(reg7) ||
											item.skuName.match(reg8) ||
											item.skuName.match(reg9) ||
											item.skuName.match(reg10)) {
											return false;
										} else {
											return true;
										}
									} else if (this.searchType === 'pinduoduo') {
										if (item.goodsName.match(reg1) ||
											item.goodsName.match(reg2) ||
											item.goodsName.match(reg3) ||
											item.goodsName.match(reg4) ||
											item.goodsName.match(reg5) ||
											item.goodsName.match(reg6) ||
											item.goodsName.match(reg7) ||
											item.goodsName.match(reg8) ||
											item.goodsName.match(reg9) ||
											item.goodsName.match(reg10)) {
											return false;
										} else {
											return true;
										}
									} else {
										if (item.title.match(reg1) ||
											item.title.match(reg2) ||
											item.title.match(reg3) ||
											item.title.match(reg4) ||
											item.title.match(reg5) ||
											item.title.match(reg6) ||
											item.title.match(reg7) ||
											item.title.match(reg8) ||
											item.title.match(reg9) ||
											item.title.match(reg10)) {
											return false;
										} else {
											return true;
										}
									}
								})
							}
							this.goodsList = this.goodsList.concat(res.list);
							// 加载状态结束
							this.loading = false;
							this.params.page += 1;
							// 数据全部加载完成
							if (this.goodsList.length === 0) {
								this.params.page = 1;
								this.empty = true;
							} else if (this.goodsList.length >= res.pagination.total) {
								this.finished = true;
							}
							if (!this.empty) {
								this.isExact = 1;
								this.exactItem = this.goodsList[0];
								this.$refs.exactSearch.open();
							}
							// 京东、拼多多精准搜没搜到弹窗
							if (this.empty) {
								this.$refs.emptySearch.open();
							}
						})
					} else {
						let service = null;
						if (this.active === 'taobao') {
							service = this.$service.shopping.goods.page(this.params)
						} else if (this.active === 'jingdong') {
							service = this.$service.jingdong.goods.page(this.params)
						} else if (this.active === 'pinduoduo') {
							service = this.$service.pdd.goods.page(this.params)
						} else {
							return false;
						}
						service.then(res => {
							// 上架过程增加vip会员商品过滤
							let isShelf = false;
							if (this.permInfo.common && this.permInfo.common.length > 0) {
								this.permInfo.common.forEach(item => {
									if (item.name === 'isShelf' && item.status === 1) {
										isShelf = true;
									}
								});
							}
							if (!isShelf) {
								let reg1 = RegExp(/腾讯视频/);
								let reg2 = RegExp(/会员/);
								let reg3 = RegExp(/年卡/);
								let reg4 = RegExp(/爱奇艺/);
								let reg5 = RegExp(/视频/);
								let reg6 = RegExp(/vip/);
								let reg7 = RegExp(/VIP/);
								let reg8 = RegExp(/芒果/);
								let reg9 = RegExp(/优酷/);
								let reg10 = RegExp(/搜狐/);
								res.list = res.list.filter(item => {
									if (this.active === 'taobao') {
										if (item.title.match(reg1) ||
											item.title.match(reg2) ||
											item.title.match(reg3) ||
											item.title.match(reg4) ||
											item.title.match(reg5) ||
											item.title.match(reg6) ||
											item.title.match(reg7) ||
											item.title.match(reg8) ||
											item.title.match(reg9) ||
											item.title.match(reg10)) {
											return false;
										} else {
											return true;
										}
									} else if (this.active === 'jingdong') {
										if (item.skuName.match(reg1) ||
											item.skuName.match(reg2) ||
											item.skuName.match(reg3) ||
											item.skuName.match(reg4) ||
											item.skuName.match(reg5) ||
											item.skuName.match(reg6) ||
											item.skuName.match(reg7) ||
											item.skuName.match(reg8) ||
											item.skuName.match(reg9) ||
											item.skuName.match(reg10)) {
											return false;
										} else {
											return true;
										}
									} else if (this.active === 'pinduoduo') {
										if (item.goodsName.match(reg1) ||
											item.goodsName.match(reg2) ||
											item.goodsName.match(reg3) ||
											item.goodsName.match(reg4) ||
											item.goodsName.match(reg5) ||
											item.goodsName.match(reg6) ||
											item.goodsName.match(reg7) ||
											item.goodsName.match(reg8) ||
											item.goodsName.match(reg9) ||
											item.goodsName.match(reg10)) {
											return false;
										} else {
											return true;
										}
									}
								});
							}
							this.goodsList = this.goodsList.concat(res.list);
							console.log(res)

							// 加载状态结束
							this.loading = false;
							this.params.page += 1;
							// 数据全部加载完成
							if (this.goodsList.length === 0) {
								this.params.page = 1;
								this.empty = true;
								this.superScrollLoader();
							} else if (this.goodsList.length >= res.pagination.total) {
								this.finished = true;
								this.superScrollLoader();
							}
							if (!this.empty) {
								if (this.goodsList[0].isExact === 1) {
									this.isExact = 1;
									this.exactItem = this.goodsList[0];
									
									console.log(this.exactItem);

									// 后续不再开启精准搜索
									if (!this.isShowResult) {
										this.openExactSearch();
									}

									this.openExact = true;
								} else {
									this.isExact = 0;
									this.$refs.aiSearch.open();
									uni.hideTabBar({});
								}
							}
						});
					}
				}
			},
			// 全网商品搜索
			superScrollLoader() {
				if (!this.superLoading && !this.superEmpty && !this.superFinished) {
					this.superLoading = true;
					let service = null;
					if (this.active === 'taobao') {
						service = this.$service.shopping.goods.superGoods(this.superParams)
					} else if (this.active === 'jingdong') {
						service = this.$service.jingdong.goods.superGoods(this.superParams)
					} else if (this.active === 'pinduoduo') {
						service = this.$service.pdd.goods.superGoods(this.superParams)
					} else {
						return false;
					}
					service.then(res => {
						// 增加vip会员商品过滤
						let reg1 = RegExp(/腾讯视频/);
						let reg2 = RegExp(/会员/);
						let reg3 = RegExp(/年卡/);
						let reg4 = RegExp(/爱奇艺/);
						let reg5 = RegExp(/视频/);
						let reg6 = RegExp(/vip/);
						let reg7 = RegExp(/VIP/);
						let reg8 = RegExp(/芒果/);
						let reg9 = RegExp(/优酷/);
						let reg10 = RegExp(/搜狐/);
						res.list = res.list.filter(item => {
							if (this.active === 'taobao') {
								if (item.title.match(reg1) ||
									item.title.match(reg2) ||
									item.title.match(reg3) ||
									item.title.match(reg4) ||
									item.title.match(reg5) ||
									item.title.match(reg6) ||
									item.title.match(reg7) ||
									item.title.match(reg8) ||
									item.title.match(reg9) ||
									item.title.match(reg10)) {
									return false;
								} else {
									return true;
								}
							} else if (this.active === 'jingdong') {
								if (item.skuName.match(reg1) ||
									item.skuName.match(reg2) ||
									item.skuName.match(reg3) ||
									item.skuName.match(reg4) ||
									item.skuName.match(reg5) ||
									item.skuName.match(reg6) ||
									item.skuName.match(reg7) ||
									item.skuName.match(reg8) ||
									item.skuName.match(reg9) ||
									item.skuName.match(reg10)) {
									return false;
								} else {
									return true;
								}
							} else if (this.active === 'pinduoduo') {
								if (item.goodsName.match(reg1) ||
									item.goodsName.match(reg2) ||
									item.goodsName.match(reg3) ||
									item.goodsName.match(reg4) ||
									item.goodsName.match(reg5) ||
									item.goodsName.match(reg6) ||
									item.goodsName.match(reg7) ||
									item.goodsName.match(reg8) ||
									item.goodsName.match(reg9) ||
									item.goodsName.match(reg10)) {
									return false;
								} else {
									return true;
								}
							}
						});
						this.superGoodsList = this.superGoodsList.concat(res.list);

						// 加载状态结束
						this.superLoading = false;
						this.superParams.page += 1;
						// 数据全部加载完成
						if (this.superGoodsList.length === 0) {
							this.superParams.page = 1;
							this.superEmpty = true;
						} else if (this.superGoodsList.length >= res.pagination.total) {
							this.superFinished = true;
							this.superScrollLoader();
						}
						if (!this.superEmpty) {
							if (this.superGoodsList[0].isExact === 1) {
								if (this.goodsList.length > 0 && this.goodsList[0].isExact === 1) {
									this.exactItem = this.goodsList[0];
									this.isExactType = 'goods';
								} else {
									this.exactItem = this.superGoodsList[0];
									this.isExactType = 'superGoods';
								}
								this.isExact = 1;
								// 启动精准搜索弹窗
								if (!this.openExact) {
									if (!this.isShowResult) {
										this.openExactSearch();
									}
								}
							} else {
								if (!this.openExact) {
									this.isExact = 0;
									this.$refs.aiSearch.open();
									uni.hideTabBar({});
								}
							}
						}
						if (this.superEmpty && this.empty) {
							if (!this.isShowResult) {
								this.$refs.emptySearch.open();
							}
						}
					});
				}
			},
			toDetail(item, operate) {
				if (this.searchType === 'jingdong') {
					if (!uni.getStorageSync('token')) {
						uni.navigateTo({
							url: '/pages/common/login',
							animationType: 'slide-in-bottom',
							animationDuration: 300
						});
						return false;
					}
					this.$service.jingdong.goods
						.createShortUrl({
							materialUrl: item.materialUrl,
							couponLink: item.couponLink
						})
						.then(res => {
							JDopen.openurl({
									url: res
								},
								result => {
									if (!result.status) {
										return this.$Router.push({
											path: '/pages/special/jingdong',
											query: {
												url: res
											}
										});
									}
									done();
								}
							);
						})
						.catch(err => {
							done();
							uni.showToast({
								title: err.message,
								icon: 'none'
							});
						});
				} else if (this.searchType === 'pinduoduo') {
					if (!uni.getStorageSync('token')) {
						uni.navigateTo({
							url: '/pages/common/login',
							animationType: 'slide-in-bottom',
							animationDuration: 300
						});
						return false;
					}
					this.$service.pdd.goods
						.createShortUrl({
							goodsId: item.goodsId,
						})
						.then(res => {
							let webView = plus.webview.create(res, 'webView', {
								top: '0px',
								bottom: '0px',
								height: '0px'
							});
							webView.show();
							done()
						})
						.catch(err => {
							done()
							uni.showToast({
								title: err.message,
								icon: 'none'
							});
						});
				} else {
					if (this.isExactType === 'superGoods') {
						uni.setStorageSync('goodsInfo', item);
						let query = {
							type: 'superGoods',
							title: item.title
						}
						if (item.isFirstOrder) {
							query.isFirstOrder = true;
							query.allowanceMoney = item.allowanceMoney;
						}
						this.$Router.push({
							path: '/pages/goods/detail',
							query: query
						});
					} else {
						if (operate === 'buy') {
							if (!uni.getStorageSync('token')) {
								uni.navigateTo({
									url: '/pages/common/login',
									animationType: 'slide-in-bottom',
									animationDuration: 300
								});
								return false;
							}
							// 多联盟分发
							this.$service.shopping.goods.tljCommunityActivity({
								isTljCommunityGood: 1,
								gid: item.gid
							}).then(res => {
								if (res.tljBatchId) {
									let params = {
										app: 'hf',
										mdGoodId: item.mdGoodId,
										gid: item.gid,
										type: res.type,
										mdMoney: res.mdMoney,
										tljMoney: res.tljMoney,
										tljBatchId: res.tljBatchId
									};

									this.$service.shopping.goods.tljCommunityBuy(params).then(resBuy => {
										Alibcsdk.init(
												initResult => {
													if (initResult.status) {
														uni.showLoading({
															title: '正在打开淘宝...'
														})
														setTimeout(() => {
															uni.hideLoading()
														}, 5000)
														Alibcsdk.openurl({
															url: resBuy,
														}, result => {
														});
													} else {
														uni.showToast({
															title: "初始化失败",
															icon: 'none'
														});
													}
												})
									}).catch(err => {
										uni.showToast({
											title: err.message,
											icon: 'none'
										})
									});
								} else {
									uni.showToast({
										title: '该商品已抢完~',
										icon: 'none'
									})
								}
							})
						} else {
							let query = {
								gid: item.gid,
								title: item.title
							};
							if (item.isFirstOrder) {
								query.isFirstOrder = true;
								query.allowanceMoney = item.allowanceMoney;
							}
							if (item.tljMoney && Number(item.tljMoney) > 0) {
								query.tljMoney = item.tljMoney;
								query.mdGoodId = item.mdGoodId;
								query.type = item.type;
								query.mdMoney = item.mdMoney;
								query.tljMoney = item.tljMoney;
								query.tljBatchId = item.tljBatchId;
								query.isTljCommunityGood = item.isTljCommunityGood;
							}
							this.$Router.push({
								path: '/pages/goods/detail',
								query: query
							});
						}
					}
				}
			},
			onChange(e) {
				if (!e.show) {
					this.isShowResult = false;
					uni.showTabBar({})
				} else {
					this.isShowResult = true;
					uni.hideTabBar({});
				}
			},
			tabChange(type) {
				if (type === this.active) {
					return false;
				}
				this.active = type;
				this.refresh();
			},
			openExactSearch() {
				// 存在用户信息，显示首单补贴价
				if (uni.getStorageSync('token')) {
					this.$service.common.userHf.isFirstOrder().then(res => {
						// 新人首单的品显示加3块
						if (res.isFirstOrder) {
							// 计算新的佣金比例
							res.setting.forEach(item => {
								if ((item.min < this.exactItem.endPrice) && (this.exactItem.endPrice <= item.max)) {
									// 是否返佣
									if (item.isCommission === 1) {
										this.exactItem.allowanceMoney = Number(this.exactItem.allowanceMoney) + item.money;
									} else {
										this.exactItem.allowanceMoney = item.money;
									}
								}
							});
							// 标记为新人首单的品
							this.exactItem.isFirstOrder = true;
						}
						// 再开启精准弹窗
						this.$refs.exactSearch.open();
					})
				} else {
					this.$refs.exactSearch.open();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search-dialog {
		position: relative;

		.ai-search {
			.ai-list {
				width: 750rpx;
				background: #fff;
				border-radius: 38rpx 38rpx 0 0;
				padding-bottom: 40rpx;

				.icon-guanbi {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					font-size: 40rpx;
					color: #fff;
					z-index: 1;
				}

				.background {
					width: 100%;
					height: 109rpx;
				}

				.tab-bar {
					@include flexBox(space-around, center);

					.tab-item {
						color: #87888D;
						font-size: 28rpx;
						transition: 0.5s;
						padding-bottom: 6rpx;
						border-bottom: 6rpx solid #fff;
						width: 120rpx;
						text-align: center;

						&.active {
							color: #221D2C;
							border-bottom: 6rpx solid #FF4545;
						}
					}
				}

				.scroll-list {
					margin-top: 20rpx;
					height: 880rpx;
					padding: 0 20rpx;

					.ai-wrap {
						padding-bottom: 20rpx;
						margin-bottom: 20rpx;
						border-bottom: 2rpx dashed #e2e2e2;
					}
				}
			}

			.super-title {
				padding: 30rpx 30rpx 0;
				margin-bottom: 20rpx;
				background: #fff;
				@include flexBox(center, center);

				.text {
					text-align: center;
					font-size: 34rpx;
					font-weight: 600;
					margin: 0 50rpx;
				}

				.line {
					width: 98rpx;
					height: 2rpx;
					background: #d0d0d0;
				}
			}
		}

		.exact-search {
			.main {
				@include flexBox(center, center, column);

				.top {
					width: 700rpx;
					padding: 20rpx 10rpx 40rpx 10rpx;
					background: #fff;
					border-radius: 42rpx;
					@include flexBox(null, center, column);

					.head {
						width: 100%;
						font-size: 28rpx;
						margin-bottom: 10rpx;
						padding: 0 20rpx;
						@include flexBox(space-between, center);

						.left {
							border-left: 5rpx solid $main-color;
							color: $main-color;
							padding-left: 20rpx;
						}

						.right {
							color: $main-color;
							@include flexBox(null, center);

							.icon-wodedingdan {
								margin-right: 10rpx;
							}
						}
					}

					.save {
						line-height: 50rpx;
						background: $main-color;
						color: #fff;
						padding: 10rpx 30rpx;
						margin-top: 30rpx;
						border-radius: 50rpx;
						font-size: 28rpx;
					}
				}

				.icon-guanbi {
					font-size: 40rpx;
					color: #fff;
					margin-top: 20rpx;
				}
			}
		}

		.empty-popup {
			.main {
				position: relative;
				width: 500rpx;
				height: 444rpx;
				background: #fff;
				border-radius: 36rpx;
				padding-top: 20rpx;
				@include flexBox(center, center, column);

				.background {
					width: 188rpx;
					height: 116rpx;
				}

				.h2 {
					color: #272221;
					font-size: 32rpx;
					margin-top: 30rpx;
					font-weight: 600;
				}

				.text {
					color: #717076;
					font-size: 28rpx;
					margin-top: 22rpx;
				}

				.btn {
					width: 244rpx;
					line-height: 64rpx;
					margin-top: 36rpx;
					background: rgba(254, 106, 92, 1);
					box-shadow: 0px 6rpx 12rpx rgba(247, 1, 20, 0.3);
					opacity: 1;
					border-radius: 38rpx;
					font-size: 28rpx;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
</style>
